<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<style type="text/css">
			.demo {
				background-color: pink;
				min-height: 200px;
			}

			.inner {
				background-color: royalblue;
				color: white;
				border: dashed 1px #eee;
				width: 50%;
			}

			.demo img {
				height: 50px;
				border: solid 1px white;
			}

			#demo1 {
				text-align: center;
			}

			#demo2 .inner {
				margin: auto;
			}

			#demo3 {
				text-align: center;
			}

			#demo3 .inner {
				margin: auto;
			}

			#demo4.inner * {
				vertical-align: middle;
			}

			#demo5 {
				position: relative;
				height: 200px;
			}

			#demo5 .inner {
				position: absolute;
				left: 25%;
				top: 20px;
				height: 160px;
			}

			#demo6 {
				position: relative;
			}

			#demo6 .inner {
				position: absolute;
				width: 80%;
				left: 10%;
				top: 50%;
				transform: translateY(-50%);
			}

			#demo7 {
				display: flex;
			}

			#demo7 .inner {
				margin: auto;
			}

			#demo8 {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			#demo9 {
				height: 200px;
				text-align: center;
			}

			#demo9:after {
			    content: '';
			    display: inline-block;
			    height: 100%;
			    vertical-align: middle;	
			}

			#demo9 .inner {
			    display: inline-block;
			    vertical-align: middle;	
				text-align: left;
			}
		</style>
	</head>
	<body>
		<section>
			<h3>水平居中</h3>
			<p>内容水平居中，text-align: center</p>
			<p>容器水平居中，margin: auto</p>
		</section>
		<section>
			<h3>内容水平居中 text-align: center</h3>
			<div id="demo1" class="demo">
				<div class="inner">
					<p>床前明月光</p>
					<p>疑是银河落九天</p>
					<p><img src="../../share/img/logo.png"></p>
					<p><input type="text" /></p>
				</div>
			</div>
		</section>
		<section>
			<h3>容器水平居中 margin: auto</h3>
			<div id="demo2" class="demo">
				<div class="inner">
					<p>床前明月光</p>
					<p>疑是银河落九天</p>
					<p><img src="../../share/img/logo.png"></p>
					<p><input type="text" /></p>
				</div>
			</div>
		</section>
		<section>
			<h3>同时水平居中 margin: auto</h3>
			<div id="demo3" class="demo">
				<div class="inner">
					<p>床前明月光</p>
					<p>疑是银河落九天</p>
					<p><img src="../../share/img/logo.png"></p>
					<p><input type="text" /></p>
				</div>
			</div>
		</section>
		<section>
			<h3>垂直居中</h3>
			<p>内容垂直居中，vertical-align: middle</p>
			<p>容器水平居中，margin: auto</p>
		</section>
		<section>
			<h3>内容垂直居中对齐 vertical-align: middle</h3>
			<div id="demo4" class="demo">
				<div class="inner">
					床前明月光<img src="../../share/img/logo.png"><input type="text" />
				</div>
			</div>
		</section>
		<section>
			<h3>容器垂直居中 绝对定位+top</h3>
			<div id="demo5" class="demo">
				<div class="inner">
					<p>床前明月光</p>
					<p>疑是银河落九天</p>
					<p><img src="../../share/img/logo.png"></p>
					<p><input type="text" /></p>
				</div>
			</div>
		</section>
		<section>
			<h3>容器垂直居中 绝对定位+transform</h3>
			<div id="demo6" class="demo">
				<div class="inner">
					<p>床前明月光</p>
					<p>疑是银河落九天</p>
					<p><img src="../../share/img/logo.png"></p>
					<p><input type="text" /></p>
				</div>
			</div>
		</section>
		<section>
			<h3>容器垂直居中 flex+margin</h3>
			<div id="demo7" class="demo">
				<div class="inner">
					<p>床前明月光</p>
					<p>疑是银河落九天</p>
					<p><img src="../../share/img/logo.png"></p>
					<p><input type="text" /></p>
				</div>
			</div>
		</section>
		<section>
			<h3>容器垂直居中 flex+align-items 最佳方式</h3>
			<div id="demo8" class="demo">
				<div class="inner">
					<p>床前明月光</p>
					<p>疑是银河落九天</p>
					<p><img src="../../share/img/logo.png"></p>
					<p><input type="text" /></p>
				</div>
			</div>
		</section>
		<section>
			<h3>容器垂直居中 </h3>
			<div id="demo9" class="demo">
				<div class="inner">
					<p>床前明月光</p>
					<p>疑是银河落九天</p>
					<p><img src="../../share/img/logo.png"></p>
					<p><input type="text" /></p>
				</div>
			</div>
		</section>
	</body>
</html>
